<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/funcionesExternas.js"></script>
<script src="js/comprobar.js" language="JavaScript"> </script>
<!-- Funciones extra para el funcionamiento de la página !-->
<script>      
   var sesion=null;
   $(document).ready(function() {
	  cambio('indexNotificaciones','570px');
	  ranking();
	  obtSesion();
   });
    <!-- Control de la sesión !-->
   	function obtSesion(){
		if (window.XMLHttpRequest) 
		{ 
   		 	var request = new XMLHttpRequest();     // Firefox, Safari, ...
		} 
		else if (window.ActiveXObject)   // Internet Explorer 
		{
    		var request = new ActiveXObject("Microsoft.XMLHTTP");
		}
		var peticion_str = '/sesion';
  		request.open('GET', peticion_str , true);
  		request.onreadystatechange= function(){
			if ( request.readyState == 4 && request.status == 200) {
				if(request.responseText){
					sesion=JSON.parse(request.responseText);
					obtenerGravatar();
					$('#datos').html('<li>Usuario: '+sesion.nombreUsuario+'</li><li>Grupo: '+sesion.grupo+'</li><li>Puntuacion: '+sesion.puntuacion+'</li>');
				}else{
					$(location).attr('href','pagInicio'); 
				}
			}
		};
		request.send(null);
	};
	<!-- Si el usuario tiene un usuario en Gravatar se toma la imagen de ese usuario: !-->
   	function obtenerGravatar(){
		$('#imUs').attr('src', 'http://www.gravatar.com/avatar/' + md5(sesion.correo));
	};
    <!-- Método para cambio de contenido dentro del iframe !-->
	function cambio(url,s){
		var iframe=$('#centro');
		iframe.attr('src',url);
		iframe.attr('height',s);
		$('#clsImagen').css('height',s);
	}
	function ranking() {
	    var request = new XMLHttpRequest();
  		var peticion_str = '/ranking/usuarios/dia';
  		request.open('GET', peticion_str , true);
  		request.onreadystatechange= function(){
			if ( request.readyState == 4 ) {
				console.log(request);
				var json;
				eval ( 'json = '+ request.responseText );
				var html="";
				n=json.Nres;
				var nomb="";
				var punt="";
				for (var i=1;i<=n;i++){
					nomb='nombre'+i;
					punt='punt'+i;
					html+='<li><div class="name">'+eval('json.'+nomb)+'</div><div class="points">'+eval('json.'+punt)+'</div></li>';
				}
				$('#lista ul').html(html);
  			}	
		};
  		request.send(null);
	}
</script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Face The Challenge</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="cabecera">
  <div id="titulo" onclick="javascript:cambio('indexNotificaciones','570px')"> FACE
    <div id="torcido">the</div>
    <p>CHALLENGE</p>
  </div>
  <div id="usuario"><img id="imUs" src="img/logo.gif" />
    <div id="datos">
      <li>Usuario: JotaGé</li>
      <li>Grupo: BASTec</li>
      <li>Puntuacion: 300</li>
    </div>
    <input id="boton" type="button" value="Perfil" onClick="javascript:obtenerUsuario(sesion.nombreUsuario)" />
  </div>
</div>
 
<div class="clsImagen" id="clsImagen">
<!-- Inicio del menú lateral de la página principal !-->
<div id="menuLat"> M
  <p></p>
  E
  <p></p>
  N
  <p></p>
  U </div>         
<div class="clsContenedor">                   
  <div class="clsTitulo" onclick="javascript:cambio('Reto','500px')">                        
    <h2>Reto</h2>
  </div>
  <div class="clsTitulo" onclick="javascript:cambio('indexGrupos','600px')">                        
    <h2>Grupo</h2>
  </div>
  <div class="clsTitulo" onclick="javascript:cambio('indexAlbum','900px')">                      
    <h2>Älbum</h2>
  </div>
  <div class="clsTitulo">                        
    <h2>Ranking</h2>
  </div>
  <div class="clsTitulo">                        
    <h2>Opciones</h2>
  </div>
</div>
</div>
<iframe id="centro" class="centroIz" scrolling="no" src="indexNotificaciones"> hola </iframe>
<div id="buscador">
  <form class="searchform">
    <select class="searchfield" id="tipobusqueda">
      <option value="0">Usuario</option>
      <option value="1">Grupo</option>
      <option value="2">Ranking grupo</option>
      <option value="3">Puntos usuario</option>
      <option value="3">Puntos grupo</option>
    </select>
    <input class="searchfield" type="text">
    <input class="searchbutton" type="button" value="Buscar">
  </form>
</div>
<div id="lista">
  <div class="titRank">Ranking Usuarios</div>
  <ul>
  </ul>
</div>
</body>
</html>
